<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>城市卡丁车结构示意图</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        
        body {
            background: linear-gradient(135deg, #1a2a6c, #2c3e50);
            color: #fff;
            min-height: 100vh;
            padding: 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        
        .container {
            max-width: 1200px;
            width: 100%;
        }
        
        header {
            text-align: center;
            margin: 20px 0 30px;
            padding: 20px;
            background: rgba(0, 0, 0, 0.3);
            border-radius: 15px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
            backdrop-filter: blur(5px);
        }
        
        h1 {
            font-size: 2.8rem;
            margin-bottom: 10px;
            background: linear-gradient(to right, #00c9ff, #92fe9d);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        }
        
        .subtitle {
            font-size: 1.4rem;
            color: #a8dadc;
            margin-bottom: 15px;
        }
        
        .content {
            display: flex;
            flex-wrap: wrap;
            gap: 30px;
            justify-content: center;
            margin-top: 20px;
        }
        
        .kart-container {
            flex: 2;
            min-width: 700px;
            background: rgba(30, 30, 50, 0.7);
            border-radius: 20px;
            padding: 25px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(100, 150, 255, 0.3);
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        
        .schematic-title {
            text-align: center;
            font-size: 1.8rem;
            margin-bottom: 25px;
            color: #4cc9f0;
        }
        
        #kart-schematic {
            width: 100%;
            height: 500px;
            background: rgba(20, 25, 45, 0.8);
            border-radius: 12px;
            position: relative;
            overflow: hidden;
        }
        
        .info-panel {
            flex: 1;
            min-width: 300px;
            background: rgba(30, 30, 50, 0.7);
            border-radius: 20px;
            padding: 25px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(100, 150, 255, 0.3);
        }
        
        .info-title {
            font-size: 1.8rem;
            margin-bottom: 20px;
            color: #4cc9f0;
            text-align: center;
        }
        
        .specs {
            margin-bottom: 25px;
        }
        
        .spec-item {
            display: flex;
            justify-content: space-between;
            padding: 12px 15px;
            margin-bottom: 10px;
            background: rgba(40, 45, 70, 0.5);
            border-radius: 10px;
            border-left: 4px solid #4361ee;
        }
        
        .spec-value {
            font-weight: bold;
            color: #90e0ef;
        }
        
        .characteristics {
            margin-top: 30px;
        }
        
        h3 {
            font-size: 1.4rem;
            margin-bottom: 15px;
            color: #4cc9f0;
            border-bottom: 2px solid #4361ee;
            padding-bottom: 8px;
        }
        
        ul {
            padding-left: 25px;
            margin-bottom: 20px;
        }
        
        li {
            margin-bottom: 10px;
            line-height: 1.5;
        }
        
        .part-info {
            position: absolute;
            background: rgba(40, 45, 70, 0.9);
            border-radius: 10px;
            padding: 15px;
            border: 2px solid #4cc9f0;
            max-width: 300px;
            display: none;
            z-index: 10;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
        }
        
        .part-info h4 {
            color: #4cc9f0;
            margin-bottom: 8px;
            font-size: 1.2rem;
        }
        
        .controls {
            display: flex;
            gap: 15px;
            margin-top: 20px;
            justify-content: center;
            width: 100%;
        }
        
        .control-btn {
            background: linear-gradient(to bottom, #4361ee, #3a0ca3);
            border: none;
            padding: 10px 20px;
            border-radius: 30px;
            color: white;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
        }
        
        .control-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
        }
        
        .control-btn:active {
            transform: translateY(1px);
        }
        
        .view-option {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-top: 15px;
        }
        
        .view-btn {
            background: rgba(67, 97, 238, 0.3);
            border: 1px solid #4361ee;
            color: #90e0ef;
            padding: 8px 15px;
            border-radius: 20px;
            cursor: pointer;
            transition: all 0.2s ease;
        }
        
        .view-btn.active {
            background: #4361ee;
            color: white;
        }
        
        footer {
            text-align: center;
            margin-top: 40px;
            padding: 20px;
            color: #a8dadc;
            font-size: 0.9rem;
        }
        
        @media (max-width: 768px) {
            .content {
                flex-direction: column;
            }
            
            .kart-container {
                min-width: 100%;
            }
            
            h1 {
                font-size: 2.2rem;
            }
            
            .subtitle {
                font-size: 1.2rem;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1>城市卡丁车结构示意图</h1>
            <div class="subtitle">高强度钢管车架 · 精密转向系统 · 模块化设计</div>
        </header>
        
        <div class="content">
            <div class="kart-container">
                <div class="schematic-title">卡丁车结构分解图</div>
                <div id="kart-schematic">
                    <!-- SVG内容将通过JavaScript动态生成 -->
                </div>
                <div class="controls">
                    <button class="control-btn" id="rotate-btn">旋转视图</button>
                    <button class="control-btn" id="explode-btn">分解视图</button>
                </div>
                <div class="view-option">
                    <button class="view-btn active" data-view="frame">车架结构</button>
                    <button class="view-btn" data-view="steering">转向系统</button>
                    <button class="view-btn" data-view="drive">驱动系统</button>
                </div>
            </div>
            
            <div class="info-panel">
                <div class="info-title">技术规格</div>
                
                <div class="specs">
                    <div class="spec-item">
                        <span>车架结构：</span>
                        <span class="spec-value">X型对称框架</span>
                    </div>
                    <div class="spec-item">
                        <span>车架材质：</span>
                        <span class="spec-value">高强度钢管</span>
                    </div>
                    <div class="spec-item">
                        <span>轴距：</span>
                        <span class="spec-value">46 厘米</span>
                    </div>
                    <div class="spec-item">
                        <span>轮距：</span>
                        <span class="spec-value">150 厘米</span>
                    </div>
                    <div class="spec-item">
                        <span>车轮直径：</span>
                        <span class="spec-value">26 厘米</span>
                    </div>
                    <div class="spec-item">
                        <span>方向盘直径：</span>
                        <span class="spec-value">35 厘米</span>
                    </div>
                    <div class="spec-item">
                        <span>座椅尺寸：</span>
                        <span class="spec-value">40×55 厘米</span>
                    </div>
                    <div class="spec-item">
                        <span>控制器盒：</span>
                        <span class="spec-value">36×20 厘米</span>
                    </div>
                    <div class="spec-item">
                        <span>整车重量：</span>
                        <span class="spec-value">约 25 公斤</span>
                    </div>
                </div>
                
                <div class="characteristics">
                    <h3>设计特点</h3>
                    <ul>
                        <li><strong>高强度X型车架</strong>：两根水平横杆与四根对角线支撑杆形成刚性结构</li>
                        <li><strong>精密转向系统</strong>：180°转向角度，灵活操控</li>
                        <li><strong>模块化座椅设计</strong>：工程塑料材质，符合人体工学</li>
                        <li><strong>动力系统</strong>：后轮双电机驱动，前轮转向</li>
                        <li><strong>控制器盒</strong>：集成电池、电机控制器和电路板</li>
                        <li><strong>重心优化</strong>：低重心设计，位于座椅下方</li>
                    </ul>
                    
                    <h3>应用场景</h3>
                    <ul>
                        <li>城市短途代步</li>
                        <li>娱乐驾驶体验</li>
                        <li>定制化改装平台</li>
                        <li>教育展示模型</li>
                    </ul>
                </div>
            </div>
        </div>
        
        <footer>
            <p>城市卡丁车结构示意图 | 工业设计展示 | 基于实际工程参数</p>
            <p>© 2023 机械工程与车辆设计</p>
        </footer>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const schematic = document.getElementById('kart-schematic');
            let rotation = 0;
            let exploded = false;
            let currentView = 'frame';
            
            // 创建信息框
            const infoBox = document.createElement('div');
            infoBox.className = 'part-info';
            schematic.appendChild(infoBox);
            
            // 渲染卡丁车
            function renderKart() {
                schematic.innerHTML = '';
                schematic.appendChild(infoBox);
                
                // 创建SVG容器
                const svgNS = "http://www.w3.org/2000/svg";
                const svg = document.createElementNS(svgNS, "svg");
                svg.setAttribute("width", "100%");
                svg.setAttribute("height", "100%");
                svg.setAttribute("viewBox", "0 0 800 500");
                schematic.appendChild(svg);
                
                // 坐标系变换
                const g = document.createElementNS(svgNS, "g");
                g.setAttribute("transform", `translate(400, 300) rotate(${rotation})`);
                svg.appendChild(g);
                
                // 绘制车架
                function drawFrame() {
                    // X型主框架
                    const frameColor = "#4cc9f0";
                    const frameWidth = 6;
                    
                    // 水平横杆（前部和后部）
                    const frontBar = document.createElementNS(svgNS, "line");
                    frontBar.setAttribute("x1", exploded ? -300 : -280);
                    frontBar.setAttribute("y1", exploded ? -120 : -100);
                    frontBar.setAttribute("x2", exploded ? 300 : 280);
                    frontBar.setAttribute("y2", exploded ? -120 : -100);
                    frontBar.setAttribute("stroke", frameColor);
                    frontBar.setAttribute("stroke-width", frameWidth);
                    frontBar.setAttribute("class", "frame-part");
                    g.appendChild(frontBar);
                    
                    const rearBar = document.createElementNS(svgNS, "line");
                    rearBar.setAttribute("x1", exploded ? -300 : -280);
                    rearBar.setAttribute("y1", exploded ? 120 : 100);
                    rearBar.setAttribute("x2", exploded ? 300 : 280);
                    rearBar.setAttribute("y2", exploded ? 120 : 100);
                    rearBar.setAttribute("stroke", frameColor);
                    rearBar.setAttribute("stroke-width", frameWidth);
                    rearBar.setAttribute("class", "frame-part");
                    g.appendChild(rearBar);
                    
                    // 对角线支撑杆（前部）
                    const frontLeftSupport = document.createElementNS(svgNS, "line");
                    frontLeftSupport.setAttribute("x1", exploded ? -300 : -280);
                    frontLeftSupport.setAttribute("y1", exploded ? -120 : -100);
                    frontLeftSupport.setAttribute("x2", exploded ? 0 : 0);
                    frontLeftSupport.setAttribute("y2", exploded ? 120 : 100);
                    frontLeftSupport.setAttribute("stroke", frameColor);
                    frontLeftSupport.setAttribute("stroke-width", frameWidth);
                    frontLeftSupport.setAttribute("class", "frame-part");
                    g.appendChild(frontLeftSupport);
                    
                    const frontRightSupport = document.createElementNS(svgNS, "line");
                    frontRightSupport.setAttribute("x1", exploded ? 300 : 280);
                    frontRightSupport.setAttribute("y1", exploded ? -120 : -100);
                    frontRightSupport.setAttribute("x2", exploded ? 0 : 0);
                    frontRightSupport.setAttribute("y2", exploded ? 120 : 100);
                    frontRightSupport.setAttribute("stroke", frameColor);
                    frontRightSupport.setAttribute("stroke-width", frameWidth);
                    frontRightSupport.setAttribute("class", "frame-part");
                    g.appendChild(frontRightSupport);
                    
                    // 对角线支撑杆（后部）
                    const rearLeftSupport = document.createElementNS(svgNS, "line");
                    rearLeftSupport.setAttribute("x1", exploded ? -300 : -280);
                    rearLeftSupport.setAttribute("y1", exploded ? 120 : 100);
                    rearLeftSupport.setAttribute("x2", exploded ? 0 : 0);
                    rearLeftSupport.setAttribute("y2", exploded ? -120 : -100);
                    rearLeftSupport.setAttribute("stroke", frameColor);
                    rearLeftSupport.setAttribute("stroke-width", frameWidth);
                    rearLeftSupport.setAttribute("class", "frame-part");
                    g.appendChild(rearLeftSupport);
                    
                    const rearRightSupport = document.createElementNS(svgNS, "line");
                    rearRightSupport.setAttribute("x1", exploded ? 300 : 280);
                    rearRightSupport.setAttribute("y1", exploded ? 120 : 100);
                    rearRightSupport.setAttribute("x2", exploded ? 0 : 0);
                    rearRightSupport.setAttribute("y2", exploded ? -120 : -100);
                    rearRightSupport.setAttribute("stroke", frameColor);
                    rearRightSupport.setAttribute("stroke-width", frameWidth);
                    rearRightSupport.setAttribute("class", "frame-part");
                    g.appendChild(rearRightSupport);
                    
                    // 添加车架标签
                    const frameLabel = document.createElementNS(svgNS, "text");
                    frameLabel.setAttribute("x", 0);
                    frameLabel.setAttribute("y", exploded ? -160 : -140);
                    frameLabel.setAttribute("text-anchor", "middle");
                    frameLabel.setAttribute("fill", frameColor);
                    frameLabel.setAttribute("font-size", "20");
                    frameLabel.setAttribute("font-weight", "bold");
                    frameLabel.textContent = "X型车架结构";
                    g.appendChild(frameLabel);
                }
                
                // 绘制方向盘和转向系统
                function drawSteering() {
                    const steeringColor = "#f72585";
                    
                    // 方向盘
                    const steeringWheel = document.createElementNS(svgNS, "circle");
                    steeringWheel.setAttribute("cx", exploded ? -100 : 0);
                    steeringWheel.setAttribute("cy", exploded ? -180 : -80);
                    steeringWheel.setAttribute("r", 35);
                    steeringWheel.setAttribute("stroke", steeringColor);
                    steeringWheel.setAttribute("stroke-width", 4);
                    steeringWheel.setAttribute("fill", "none");
                    steeringWheel.setAttribute("class", "steering-part");
                    g.appendChild(steeringWheel);
                    
                    // 方向盘握把
                    for (let i = 0; i < 3; i++) {
                        const angle = (i * 120 + rotation) * Math.PI / 180;
                        const grip = document.createElementNS(svgNS, "circle");
                        grip.setAttribute("cx", exploded ? -100 + 30 * Math.cos(angle) : 0 + 30 * Math.cos(angle));
                        grip.setAttribute("cy", exploded ? -180 + 30 * Math.sin(angle) : -80 + 30 * Math.sin(angle));
                        grip.setAttribute("r", 8);
                        grip.setAttribute("fill", steeringColor);
                        grip.setAttribute("class", "steering-part");
                        g.appendChild(grip);
                    }
                    
                    // 转向柱
                    const steeringColumn = document.createElementNS(svgNS, "line");
                    steeringColumn.setAttribute("x1", exploded ? -100 : 0);
                    steeringColumn.setAttribute("y1", exploded ? -180 : -80);
                    steeringColumn.setAttribute("x2", exploded ? -100 : 0);
                    steeringColumn.setAttribute("y2", exploded ? -120 : -40);
                    steeringColumn.setAttribute("stroke", steeringColor);
                    steeringColumn.setAttribute("stroke-width", 6);
                    steeringColumn.setAttribute("class", "steering-part");
                    g.appendChild(steeringColumn);
                    
                    // 转向机构
                    const steeringMechanism = document.createElementNS(svgNS, "rect");
                    steeringMechanism.setAttribute("x", exploded ? -120 : -20);
                    steeringMechanism.setAttribute("y", exploded ? -120 : -40);
                    steeringMechanism.setAttribute("width", 40);
                    steeringMechanism.setAttribute("height", 20);
                    steeringMechanism.setAttribute("rx", 5);
                    steeringMechanism.setAttribute("fill", steeringColor);
                    steeringMechanism.setAttribute("class", "steering-part");
                    g.appendChild(steeringMechanism);
                    
                    // 添加转向系统标签
                    const steeringLabel = document.createElementNS(svgNS, "text");
                    steeringLabel.setAttribute("x", exploded ? -100 : 0);
                    steeringLabel.setAttribute("y", exploded ? -220 : -120);
                    steeringLabel.setAttribute("text-anchor", "middle");
                    steeringLabel.setAttribute("fill", steeringColor);
                    steeringLabel.setAttribute("font-size", "18");
                    steeringLabel.textContent = "转向系统";
                    g.appendChild(steeringLabel);
                }
                
                // 绘制座椅
                function drawSeat() {
                    const seatColor = "#90e0ef";
                    
                    // 座椅底座
                    const seatBase = document.createElementNS(svgNS, "rect");
                    seatBase.setAttribute("x", exploded ? -40 : -20);
                    seatBase.setAttribute("y", exploded ? -20 : 0);
                    seatBase.setAttribute("width", 40);
                    seatBase.setAttribute("height", 55);
                    seatBase.setAttribute("rx", 8);
                    seatBase.setAttribute("fill", seatColor);
                    seatBase.setAttribute("class", "seat-part");
                    seatBase.setAttribute("opacity", "0.8");
                    g.appendChild(seatBase);
                    
                    // 座椅靠背
                    const seatBack = document.createElementNS(svgNS, "rect");
                    seatBack.setAttribute("x", exploded ? -40 : -20);
                    seatBack.setAttribute("y", exploded ? -70 : -50);
                    seatBack.setAttribute("width", 40);
                    seatBack.setAttribute("height", 50);
                    seatBack.setAttribute("rx", 8);
                    seatBack.setAttribute("fill", seatColor);
                    seatBack.setAttribute("class", "seat-part");
                    seatBack.setAttribute("opacity", "0.8");
                    g.appendChild(seatBack);
                    
                    // 添加座椅标签
                    const seatLabel = document.createElementNS(svgNS, "text");
                    seatLabel.setAttribute("x", exploded ? 0 : 0);
                    seatLabel.setAttribute("y", exploded ? -90 : -70);
                    seatLabel.setAttribute("text-anchor", "middle");
                    seatLabel.setAttribute("fill", seatColor);
                    seatLabel.setAttribute("font-size", "16");
                    seatLabel.textContent = "模块化座椅";
                    g.appendChild(seatLabel);
                }
                
                // 绘制控制器盒
                function drawControllerBox() {
                    const boxColor = "#ff9e00";
                    
                    // 控制器盒
                    const controllerBox = document.createElementNS(svgNS, "rect");
                    controllerBox.setAttribute("x", exploded ? -60 : -18);
                    controllerBox.setAttribute("y", exploded ? 100 : 60);
                    controllerBox.setAttribute("width", 36);
                    controllerBox.setAttribute("height", 20);
                    controllerBox.setAttribute("rx", 4);
                    controllerBox.setAttribute("fill", boxColor);
                    controllerBox.setAttribute("class", "controller-part");
                    controllerBox.setAttribute("opacity", "0.8");
                    g.appendChild(controllerBox);
                    
                    // 控制器细节
                    for (let i = 0; i < 3; i++) {
                        const component = document.createElementNS(svgNS, "rect");
                        component.setAttribute("x", exploded ? -60 + i*12 : -18 + i*12);
                        component.setAttribute("y", exploded ? 100 : 60);
                        component.setAttribute("width", 8);
                        component.setAttribute("height", 20);
                        component.setAttribute("fill", i === 0 ? "#4361ee" : i === 1 ? "#f72585" : "#4cc9f0");
                        component.setAttribute("class", "controller-part");
                        g.appendChild(component);
                    }
                    
                    // 添加控制器标签
                    const boxLabel = document.createElementNS(svgNS, "text");
                    boxLabel.setAttribute("x", exploded ? -60 : -18);
                    boxLabel.setAttribute("y", exploded ? 90 : 50);
                    boxLabel.setAttribute("fill", boxColor);
                    boxLabel.setAttribute("font-size", "14");
                    boxLabel.textContent = "控制器盒";
                    g.appendChild(boxLabel);
                }
                
                // 绘制车轮
                function drawWheels() {
                    const wheelColor = "#adb5bd";
                    const tireColor = "#212529";
                    const hubColor = "#495057";
                    
                    // 前轮位置
                    const frontWheelPositions = [
                        {x: exploded ? -300 : -280, y: exploded ? -120 : -100},
                        {x: exploded ? 300 : 280, y: exploded ? -120 : -100}
                    ];
                    
                    // 后轮位置
                    const rearWheelPositions = [
                        {x: exploded ? -300 : -280, y: exploded ? 120 : 100},
                        {x: exploded ? 300 : 280, y: exploded ? 120 : 100}
                    ];
                    
                    // 绘制前轮
                    frontWheelPositions.forEach(pos => {
                        // 轮胎
                        const tire = document.createElementNS(svgNS, "circle");
                        tire.setAttribute("cx", pos.x);
                        tire.setAttribute("cy", pos.y);
                        tire.setAttribute("r", 26);
                        tire.setAttribute("fill", tireColor);
                        tire.setAttribute("class", "wheel-part");
                        g.appendChild(tire);
                        
                        // 轮毂
                        const hub = document.createElementNS(svgNS, "circle");
                        hub.setAttribute("cx", pos.x);
                        hub.setAttribute("cy", pos.y);
                        hub.setAttribute("r", 10);
                        hub.setAttribute("fill", hubColor);
                        hub.setAttribute("class", "wheel-part");
                        g.appendChild(hub);
                        
                        // 轮毂细节
                        for (let i = 0; i < 5; i++) {
                            const angle = (i * 72 + rotation) * Math.PI / 180;
                            const spoke = document.createElementNS(svgNS, "line");
                            spoke.setAttribute("x1", pos.x);
                            spoke.setAttribute("y1", pos.y);
                            spoke.setAttribute("x2", pos.x + 26 * Math.cos(angle));
                            spoke.setAttribute("y2", pos.y + 26 * Math.sin(angle));
                            spoke.setAttribute("stroke", wheelColor);
                            spoke.setAttribute("stroke-width", 2);
                            spoke.setAttribute("class", "wheel-part");
                            g.appendChild(spoke);
                        }
                        
                        // 转向节（羊角）
                        const steeringKnuckle = document.createElementNS(svgNS, "path");
                        steeringKnuckle.setAttribute("d", `M${pos.x-15},${pos.y-30} L${pos.x},${pos.y-10} L${pos.x+15},${pos.y-30} Z`);
                        steeringKnuckle.setAttribute("fill", "#6c757d");
                        steeringKnuckle.setAttribute("class", "wheel-part");
                        g.appendChild(steeringKnuckle);
                    });
                    
                    // 绘制后轮（动力轮）
                    rearWheelPositions.forEach(pos => {
                        // 轮胎
                        const tire = document.createElementNS(svgNS, "circle");
                        tire.setAttribute("cx", pos.x);
                        tire.setAttribute("cy", pos.y);
                        tire.setAttribute("r", 26);
                        tire.setAttribute("fill", tireColor);
                        tire.setAttribute("class", "wheel-part");
                        g.appendChild(tire);
                        
                        // 轮毂（带电机）
                        const hub = document.createElementNS(svgNS, "circle");
                        hub.setAttribute("cx", pos.x);
                        hub.setAttribute("cy", pos.y);
                        hub.setAttribute("r", 10);
                        hub.setAttribute("fill", "#e63946");
                        hub.setAttribute("class", "wheel-part");
                        g.appendChild(hub);
                        
                        // 电机细节
                        const motor = document.createElementNS(svgNS, "circle");
                        motor.setAttribute("cx", pos.x);
                        motor.setAttribute("cy", pos.y);
                        motor.setAttribute("r", 8);
                        motor.setAttribute("fill", "none");
                        motor.setAttribute("stroke", "#f1faee");
                        motor.setAttribute("stroke-width", 2);
                        motor.setAttribute("class", "wheel-part");
                        g.appendChild(motor);
                        
                        // 电机绕组
                        for (let i = 0; i < 8; i++) {
                            const angle = (i * 45) * Math.PI / 180;
                            const coil = document.createElementNS(svgNS, "line");
                            coil.setAttribute("x1", pos.x + 4 * Math.cos(angle));
                            coil.setAttribute("y1", pos.y + 4 * Math.sin(angle));
                            coil.setAttribute("x2", pos.x + 8 * Math.cos(angle));
                            coil.setAttribute("y2", pos.y + 8 * Math.sin(angle));
                            coil.setAttribute("stroke", "#f1faee");
                            coil.setAttribute("stroke-width", 1.5);
                            coil.setAttribute("class", "wheel-part");
                            g.appendChild(coil);
                        }
                        
                        // 添加电机标签
                        if (pos.x > 0) {
                            const motorLabel = document.createElementNS(svgNS, "text");
                            motorLabel.setAttribute("x", pos.x + 40);
                            motorLabel.setAttribute("y", pos.y);
                            motorLabel.setAttribute("fill", "#e63946");
                            motorLabel.setAttribute("font-size", "14");
                            motorLabel.textContent = "动力电机";
                            g.appendChild(motorLabel);
                        }
                    });
                    
                    // 添加车轮标签
                    const wheelLabel = document.createElementNS(svgNS, "text");
                    wheelLabel.setAttribute("x", exploded ? 300 : 280);
                    wheelLabel.setAttribute("y", exploded ? -150 : -130);
                    wheelLabel.setAttribute("fill", wheelColor);
                    wheelLabel.setAttribute("font-size", "14");
                    wheelLabel.textContent = "26cm 耐磨轮胎";
                    g.appendChild(wheelLabel);
                }
                
                // 根据当前视图绘制相应部件
                if (currentView === 'frame' || currentView === 'all') {
                    drawFrame();
                }
                
                if (currentView === 'steering' || currentView === 'all') {
                    drawSteering();
                }
                
                drawSeat();
                drawControllerBox();
                drawWheels();
                
                // 添加部件交互事件
                const parts = g.querySelectorAll('[class$="-part"]');
                parts.forEach(part => {
                    part.addEventListener('mouseenter', function(e) {
                        const partType = this.getAttribute('class').split('-')[0];
                        let partName = "";
                        let partDesc = "";
                        
                        switch(partType) {
                            case "frame":
                                partName = "X型车架结构";
                                partDesc = "高强度钢管焊接框架，两根水平横杆与四根对角线支撑杆形成刚性整体，抗扭能力强，适合复杂路况。";
                                break;
                            case "steering":
                                partName = "转向系统";
                                partDesc = "直径35cm方向盘，180°转向角度，精密齿轮传动，轴径18mm，确保灵活精准的操控体验。";
                                break;
                            case "seat":
                                partName = "模块化座椅";
                                partDesc = "工程塑料材质，尺寸40×55cm，座高25cm，符合人体工学设计，边缘弧度贴合人体曲线。";
                                break;
                            case "controller":
                                partName = "控制器盒";
                                partDesc = "尺寸36×20cm，内装电池、电机控制器和主电路板，标准化接口便于升级维护。";
                                break;
                            case "wheel":
                                partName = "动力轮系统";
                                partDesc = "前轮为从动轮，后轮为动力轮（直径26cm），配备有刷电机，轮毂10cm，轴杆直径12mm。";
                                break;
                        }
                        
                        infoBox.innerHTML = `
                            <h4>${partName}</h4>
                            <p>${partDesc}</p>
                        `;
                        infoBox.style.display = 'block';
                        infoBox.style.left = (e.clientX - schematic.getBoundingClientRect().left + 10) + 'px';
                        infoBox.style.top = (e.clientY - schematic.getBoundingClientRect().top + 10) + 'px';
                    });
                    
                    part.addEventListener('mouseleave', function() {
                        infoBox.style.display = 'none';
                    });
                    
                    part.addEventListener('mousemove', function(e) {
                        infoBox.style.left = (e.clientX - schematic.getBoundingClientRect().left + 10) + 'px';
                        infoBox.style.top = (e.clientY - schematic.getBoundingClientRect().top + 10) + 'px';
                    });
                });
            }
            
            // 初始渲染
            renderKart();
            
            // 旋转按钮事件
            document.getElementById('rotate-btn').addEventListener('click', function() {
                rotation = (rotation + 45) % 360;
                renderKart();
            });
            
            // 分解视图按钮事件
            document.getElementById('explode-btn').addEventListener('click', function() {
                exploded = !exploded;
                this.textContent = exploded ? "组合视图" : "分解视图";
                renderKart();
            });
            
            // 视图切换按钮
            document.querySelectorAll('.view-btn').forEach(btn => {
                btn.addEventListener('click', function() {
                    document.querySelectorAll('.view-btn').forEach(b => b.classList.remove('active'));
                    this.classList.add('active');
                    currentView = this.getAttribute('data-view');
                    renderKart();
                });
            });
        });
    </script>
</body>
</html>